<template>
  <div>
    <Card istitle>
      <template #title>账号列表</template>
      <template>
        <!-- 按钮 -->
        <div>
          <el-button type="danger" size="mini" @click="allDeleteUser"
            >批量删除</el-button
          ><el-button type="primary" size="mini" @click="toggleSelection()"
            >取消选择</el-button
          >
        </div>

        <!-- 表格内容 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          size="mini"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="account" label="账户" width="200">
          </el-table-column>
          <el-table-column prop="userGroup" label="管理权限" width="200">
          </el-table-column>
          <el-table-column label="创建时间">
            <template v-slot="{ row }">
              {{ row.ctime | setTimer }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <!-- 通过作用域插槽绑定的row属性获取数据 -->
            <template v-slot="{ row }">
              <el-button type="primary" size="mini" @click="showupdata(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="deleteUser(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
          :current-page.sync="currentPage"
        >
        </el-pagination>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
          <el-form :model="userform" :rules="updataUserRules" ref="userfrom">
            <el-form-item label="账号" label-width="100px" prop="account">
              <el-input
                v-model="userform.account"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户组" label-width="100px" prop="userGroup">
              <el-select v-model="userform.userGroup" placeholder="请选择">
                <el-option label="普通管理员" value="普通管理员"> </el-option>
                <el-option label="超级管理员" value="超级管理员"> </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser('userfrom')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </template>
    </Card>
  </div>
</template>

<script>
import { getUserList, allDeleteUser, deleteUser, editUser } from '@/api/user.js'
import { messagebox } from '@/utils/messagebox.js'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      dialogFormVisible: false,
      userform: { account: '', userGroup: '' },
      updataUserRules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        userGroup: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ]
      }
    }
  },

  methods: {
    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 选择一页显示多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.getUser()
    },
    // 换页触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.getUser()
    },
    // 获取用户数据
    async getUser() {
      // 发送请求
      const { data, total } = await getUserList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      // 设置数据
      this.tableData = data
      this.total = total
    },
    // 删除用户
    async deleteUser(id) {
      // 使用封装的提示盒子
      messagebox.call(
        this,
        async () => {
          // 发起删除请求
          const { code } = await deleteUser({ id })
          if (code === 0) {
            // 重新发起请求
            this.getUser()
          }
        },
        '此操作将永久删除该用户'
      )
    },
    // 批量删除
    async allDeleteUser() {
      // 如果没有需要删除的用户就退出函数
      if (!this.multipleSelection) return
      // 获取选择用户id
      const allSelectUser = []
      this.multipleSelection.forEach(item => {
        allSelectUser.push(item.id)
      })
      // 使用封装的提示盒子
      messagebox.call(
        this,
        async () => {
          // 发起删除请求
          const { code } = await allDeleteUser({
            ids: `[${allSelectUser}]`
          })
          // 判断是否删除成功
          if (code === 0) {
            // 重新发起请求
            this.getUser()
          }
        },
        '此操作将永久删除这些用户'
      )
    },
    // 显示更改用户信息提示框
    showupdata(data) {
      this.dialogFormVisible = true
      this.userform = { ...data }
    },
    // 更改用户信息
    editUser(fromName) {
      // 触发验证
      this.$refs[fromName].validate(async valid => {
        if (valid) {
          // 发起修改请求
          const { code } = await editUser({
            id: this.userform.id,
            account: this.userform.account,
            userGroup: this.userform.userGroup
          })
          // 判断是否修改成功
          if (code === 0) {
            this.getUser()
          }
          // 隐藏提示框
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created() {
    // 获取账户列表
    this.getUser()
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0 40px;
}
.el-input {
  width: 221px;
}
</style>
